import 'package:flutter/material.dart';
import 'package:sharing/ui/widget/user_login.dart';
import 'package:sharing/ui/login_register_header.dart';
import 'package:dio/dio.dart';
import 'package:sharing/resources/dimens.dart';
import 'package:sharing/resources/colors.dart';

class Register extends StatefulWidget {
  @override
  _RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  static const validUrl = "";

  // 标致获取验证码是否成功
  bool _valid_pass = false;

  String _validCode = "";
  String _phone = "";
  String _password = "";

  void _valueChanged(String str) {
    print("_valueChanged $str");
  }

  @override
  Widget build(BuildContext context) {
    return _buildBody(context);
  }

  // 请求发送验证码的过程
  void _fetchValidCode() async {
    Dio dio = new Dio();
    Response response = await dio.get(validUrl);

    // 如果返回的状态码是 200
    if (response.statusCode == 200) {
    } else {}
  }

  // 构造页面
  Widget _buildBody(BuildContext context) {
    return Material(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  height: Dimensions.pd48,
                ),
                LoginOrRegisterHeader(
                  text: "注册",
                ),

                // 构建手机号码输入框
                _buildPhoneInput(context),

                //  _buildValidCode(context),

                _buildPwdInput(context),

                SizedBox(
                  height: Dimensions.pd32,
                ),
                _RegisterBtn(),
              ],
            ),
            _buildBottom(context),
          ],
        ),
      ),
    );
  }

  // 构造 底部按钮
  Widget _buildBottom(BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      margin: const EdgeInsets.only(bottom: Dimensions.pd16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          GestureDetector(
            child: Text(
              "已经有账号",
              style: TextStyle(
                fontSize: Dimensions.fontSp10,
                color: AppColor.primary,
                fontWeight: FontWeight.normal,
              ),
            ),
            onTap: () {
              _loginOnTap(context);
            },
          ),
        ],
      ),
    );
  }

  _loginOnTap(BuildContext context) {
    // 用户已经有账号了, 点击导航到 用户的登录页面
    Navigator.of(context).pushReplacement(MaterialPageRoute(
      builder: (context) => Login(),
    ));
  }

  // 构造手机号码的输入输入框
  Widget _buildPwdInput(BuildContext context) {
    return new Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TextField(
        maxLength: Dimensions.pwdInput,
        keyboardType: TextInputType.number,
        style: TextStyle(
          fontSize: Dimensions.fontSp20,
          color: AppColor.primary,
          fontWeight: FontWeight.normal,
        ),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(Dimensions.pd10),
          prefixIcon: Icon(Icons.fingerprint),
          labelText: '请输入密码',
          labelStyle: TextStyle(
              fontSize: Dimensions.fontSp10,
              color: Colors.black12,
              fontWeight: FontWeight.normal),
          helperText: '',
        ),
        onChanged: _inputPwdValueChanged,
        textInputAction: TextInputAction.next,
        //  autofocus: true,
        onSubmitted: (Str) {
          print("submit ${Str}");
        },
      ),
    );
  }

  // 构造手机号码的输入输入框
  Widget _buildPhoneInput(BuildContext context) {
    return new Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TextField(
        maxLength: Dimensions.phoneInput,
        keyboardType: TextInputType.number,
        style: TextStyle(
          fontSize: Dimensions.fontSp20,
          color: Colors.black,
          fontWeight: FontWeight.normal,
        ),

        decoration: InputDecoration(
          prefixIcon: Icon(Icons.phone_android),
          contentPadding: EdgeInsets.all(Dimensions.pd10),
          //  icon: Icon(Icons.phone_android),
          labelText: '请输入注册的手机号码',
          labelStyle: TextStyle(
              fontSize: Dimensions.fontSp14,
              color: Colors.black54,
              fontWeight: FontWeight.normal),
          helperText: '',
        ),
        onChanged: _inputPhoneValueChanged,
        textInputAction: TextInputAction.next,
        //  autofocus: true,
        onSubmitted: (Str) {
          print("submit ${Str}");
        },
      ),
    );
  }

  // 构造 验证码
  Widget _buildValidCode(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(horizontal: Dimensions.pd8),
      padding: const EdgeInsets.symmetric(vertical: Dimensions.pd8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(left: Dimensions.pd8),
              child: TextField(
                maxLength: Dimensions.phoneInput,
                keyboardType: TextInputType.number,
                style: TextStyle(
                  fontSize: Dimensions.fontSp20,
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(Dimensions.pd10),
                  icon: Icon(Icons.phone_android),
                  labelText: '获取我们的..',
                  labelStyle: TextStyle(
                      fontSize: Dimensions.fontSp14,
                      color: Colors.black,
                      fontWeight: FontWeight.normal),
                  helperText: '',
                ),
                onChanged: _valueChanged,
                textInputAction: TextInputAction.next,
                //  autofocus: true,
                onSubmitted: (Str) {
                  print("submit ${Str}");
                },
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: Dimensions.pd8),
            child: FlatButton.icon(
              onPressed: () {},
              icon: Icon(Icons.refresh),
              label: Text(
                "获取验证码",
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 手机号码输入框
  void _inputPhoneValueChanged(String value) {
    _phone = value;
  }

  void _inputPwdValueChanged(String value) {
    _password = value;
  }
}

class _RegisterBtn extends StatefulWidget {
  ValueChanged<String> valueChanged;

  @override
  __RegisterBtnState createState() => __RegisterBtnState();
}

class __RegisterBtnState extends State<_RegisterBtn> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: Dimensions.pd8),
      margin: const EdgeInsets.symmetric(horizontal: Dimensions.pd8),
      alignment: Alignment.center,
      color: AppColor.primary,
      child: GestureDetector(
        onTap: () {
          print("用户需要去注册的时间");
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                alignment: Alignment.center,
                child: Text(
                  "注册",
                  style: TextStyle(
                    fontSize: Dimensions.fontSp24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
